<template>
	<div class="title">
		<div>{{ pageName }}</div>
		<div class="search" v-if="showSearch">
			<input type="text" v-model="value">
			<button @click="onSearch">{{ searchText }}</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Title',
		props: {
			pageName: {
				type: String,
				default:''
			},
			showSearch:{
				type:Boolean,
				default:false
			},
			searchText:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				value:''
			}	
		},
		methods:{
			onSearch(){
				this.$emit('onSearch',this.value)
			}
		}
	}
</script>

<style scoped lang="less">
.title{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width:1200px;
	margin:0 auto;
	font-size:24px;
	font-weight: 600;
	color:#255389;
	border-bottom:1px solid #eeeaf3;
	padding-bottom: 15px;
	.search{
		overflow: hidden;
		input{
			float: left;
			width:180px;
			border:1px solid #939393;
			height:28px;
		}
		button{
			float: left;
			background-color: #2f679b;
			border:1px solid #2f679b;
			height:30px;
			width:60px;
			text-align: center;
			color:#fff;
			cursor: pointer;
		}
	}
}
</style>
